<template>
  <div class="box">
    <div class="top-echarts">
      <div class="chart pie-chart">
        <EchartsRingChart
          :chart-title="chartTitle"
          :title-icon-color="titleIconColor"
          :time-range-options="timeRangeOptions"
          :chart-datasets="chartDatasets"
          @data-change="handleDataChange"
        />
      </div>

      <div class="chart bar-chart">
        <EchartsBarChart
          :chart-title="chartTitle"
          :title-icon-color="titleIconColor"
          :time-range-options="timeRangeOptions"
          :chart-datasets="chartDatasets"
          @data-change="handleDataChange"
        />
      </div>
      <div class="chart line-chart">
        <EchartsLineChart
          :chart-title="chartTitle"
          :title-icon-color="titleIconColor"
          :time-range-options="timeRangeOptions"
          :chart-datasets="chartDatasets"
          @data-change="handleDataChange"
        />
      </div>
    </div>
    <div class="main-box">
      <div class="search-bar-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="计划名称">
            <el-input
              v-model="formInline.planName"
              placeholder="请输入计划名称"
              class="search-input"
            />
          </el-form-item>
          <el-form-item label="计划编号">
            <el-input
              v-model="formInline.planCode"
              placeholder="请输入计划编号"
              class="search-input"
            />
          </el-form-item>
          <el-form-item label="计划日期">
            <el-date-picker
              v-model="formInline.dateRange"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
        <ExButton plain @click="showMore = !showMore">更多</ExButton>
        <div v-if="showMore" class="more-fields">
          <!-- 这里可根据实际需求添加更多搜索字段，比如计划类型等 -->
          <el-input placeholder="请输入额外字段1" class="search-input" />
          <el-input placeholder="请输入额外字段2" class="search-input" />
        </div>
        <div class="button-group">
          <ExButton plain>咨询</ExButton>
          <ExButton plain>重置</ExButton>
          <ExButton>创建计划</ExButton>
        </div>
      </div>
      <ex-search-table
        :columns="columns"
        :data="DataList"
        :total="total"
        :current-page="query.page"
        :page-size="query.pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
      </ex-search-table>
    </div>
  </div>
</template>
<script setup lang="jsx">
  import { ref, reactive } from 'vue'
  import { useTable } from '@/hooks/useTable'
  import EchartsRingChart from './compoents/EchartsRingChart.vue'
  import EchartsBarChart from './compoents/EchartsBarChart.vue'
  import EchartsLineChart from './compoents/EchartsLineChart.vue'
  import ExSearchTable from '@/components/ExSearchTable/index.vue'
  import ExButton from '@/components/ExButton/index.vue'
  import { getApiList } from '@/api/api'
  defineOptions({
    name: 'Flightplan'
  })
  const formInline = ref({
    planName: '',
    planCode: '',
    dateRange: []
  })
  const showMore = ref(false)
  const query = reactive({
    page: 1,
    pageSize: 10
  })
  const DataList = ref([
    {
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '次日计划',
      taskNature: '河湖巡查',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Reported'
    },
    {
      serialNumber: 2,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '次日计划',
      taskNature: '校园巡检',
      creationTime: '2025-08-01 15:03:46',
      status: 'Completed'
    },
    {
      serialNumber: 3,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '紧急计划',
      taskNature: '道路巡检',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Reported'
    },
    {
      serialNumber: 4,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '今日计划',
      taskNature: '道路巡检',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Released'
    },
    {
      serialNumber: 5,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '次日计划',
      taskNature: '小区巡检',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Reported'
    },
    {
      serialNumber: 6,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '次日计划',
      taskNature: '空气检查',
      creationTime: '2025-08-01 15:03:46',
      status: 'Completed'
    },
    {
      serialNumber: 7,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '今日计划',
      taskNature: 'AI识别',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Reported'
    },
    {
      serialNumber: 8,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '今日计划',
      taskNature: '河湖巡查',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Reported'
    },
    {
      serialNumber: 9,
      planNumber: 'UA-20250801095042-9426',
      planName: 'Bihu Lake Park Area Flight Plan',
      planDate: '2025-08-01',
      planTimePeriod: '09:48-18:50',
      planType: '今日计划',
      taskNature: '河湖巡查',
      creationTime: '2025-08-01 15:03:46',
      status: 'To Be Reported'
    }
  ])
  const columns = ref([
    {
      label: '序号',
      type: 'index'
    },
    {
      label: '计划编号',
      prop: 'planNumber',
      render: (row) => {
        return (
          <span
            style={{
              display: 'inline-block',
              width: '100%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }}
            title={row.planNumber} // 鼠标悬停时显示完整内容
          >
            {row.planNumber}
          </span>
        )
      }
    },
    {
      label: '计划名称',
      prop: 'planName',
      render: (row) => {
        return (
          <span
            style={{
              display: 'inline-block',
              width: '100%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }}
            title={row.planName} // 鼠标悬停时显示完整内容
          >
            {row.planName}
          </span>
        )
      }
    },
    {
      label: '计划日期',
      prop: 'planDate',
      render: (row) => {
        return <span>{row.planDate}</span>
      }
    },
    {
      label: '计划时段',
      prop: 'planTimePeriod',
      render: (row) => {
        return <span>{row.planTimePeriod}</span>
      }
    },
    {
      label: '计划类型',
      prop: 'planType',
      render: (row) => {
        return <span>{row.planType}</span>
      }
    },
    {
      label: '任务性质',
      prop: 'taskNature',
      render: (row) => {
        return <span>{row.taskNature}</span>
      }
    },
    {
      label: '创建时间',
      prop: 'creationTime',
      width: 150,
      render: (row) => {
        return <span>{row.creationTime}</span>
      }
    },
    {
      label: '状态',
      prop: 'status',
      render: (row) => {
        // 定义状态映射关系
        const statusMap = {
          'To Be Reported': { text: '待上报', color: '#409eff' }, // 蓝色
          Completed: { text: '已完成', color: '#67c23a' }, // 绿色
          'To Be Released': { text: '待放行', color: '#e6a23c' }, // 橙色
          'To Be Approved': { text: '待审批', color: '#f56c6c' }, // 红色
          Pending: { text: '待处理', color: '#909399' } // 灰色
        }

        const statusInfo = statusMap[row.status] || {
          text: row.status,
          color: '#909399'
        }

        return (
          <div>
            <span
              style={{
                display: 'inline-block',
                width: '8px',
                height: '8px',
                borderRadius: '50%',
                backgroundColor: statusInfo.color,
                marginRight: '8px'
              }}
            ></span>
            <span>{statusInfo.text}</span>
          </div>
        )
      }
    },
    {
      label: '操作',
      prop: 'action',
      width: 280,
      render: (row) => {
        return (
          <div>
            <ExButton plain size="small" type="primary" icon="tickets">
              详情
            </ExButton>
            <ExButton plain size="small" type="warning" icon="refresh-right">
              撤回计划
            </ExButton>
            <ExButton plain size="small" type="success" icon="document">
              放飞申请
            </ExButton>
          </div>
        )
      }
    }
  ])

  const {
    data,
    total,
    selectItems,
    getListAsync,
    deleteListAsync,
    search,
    reset,
    handleSortChange,
    handleCurrentChange,
    handleSizeChange,
    handleSelectionChange,
    handleClearSelection
  } = useTable({
    query,
    queryApi: getApiList
  })
</script>
<style scoped lang="scss">
  .top-echarts {
    width: 100%;
    height: 265px;
    display: flex;
    // display: grid;
    // grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    .chart {
      flex: 1;
      background: linear-gradient(300deg, #f8fbff 0%, #e9f1ff 100%);
      box-shadow: 4px 7px 7px 0px rgba(209, 224, 250, 0.23),
        inset 0px 0px 15px 0px #ffffff;
      border: 1px solid rgb(255, 255, 255);

      border-radius: 18px 18px 18px 18px;
      flex-shrink: 0; /* 防止图表被压缩 */
    }
  }
  .main-box {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(308deg, #f8fbff 0%, #f2f7ff 100%);
    box-shadow: 4px 7px 16px 0px rgba(209, 224, 250, 0.23),
      inset 0px 0px 15px 0px #ffffff;
    border-radius: 18px 18px 18px 18px;
    border: 1px solid #ffffff;
  }
  .search-bar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
  }
  :deep(.el-form-item__label) {
    height: 22px;
    font-family: 'Alibaba PuHuiTi 2', 'Alibaba PuHuiTi 2.0';
    font-weight: normal;
    font-size: 16px !important;
    color: #373737;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  :deep(.el-input__wrapper) {
    background: linear-gradient(90deg, #dde5f4 0%, #e5edfb 100%);
    border-radius: 5px 5px 5px 5px;
    opacity: 0.5;
    // width: 50px;
  }
  .search-input {
    width: 160px;
  }
  .more-fields {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
  }
  .button-group {
    margin-left: auto;
  }
  .el-form--inline .el-form-item {
    margin-right: 25px;
  }
</style>
